<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
        }

        .bigbox {
            width: 100%;
            height: 100%;
            /* background-color: aqua; */
        }

        .boxleft {
            width: 60%;
            height: 100%;
            /* background-color: blue; */
            float: left;
            margin-left: 60px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            box-shadow: -5px 2px 12px gray;
        }

        .boxleft .smallbox {
            border: 1px solid gray;
            width: 23%;
            height: 50%;
        }

        .boxleft .smallbox p {
            margin-left: 20px;
        }

        .boxleft .smallbox img {
            width: 100%;
        }

        .boxleft button {
            background-color: red;
            height: 25px;
            width: 80px;
            margin-left: 12px;
            color: white;
            font-size: 13px;
            text-align: center;
        }



        .boxright {
            width: 30%;
            height: 100%;
            background-color: pink;
            float: right;
            box-shadow: -5px 2px 12px gray;
        }

        .boxright h4 {
            margin-top: 20px;
            margin-left: 10px;
        }

        .boxright .liebiao {
            width: 100%;
            height: 100%;
        }

        .boxright .liebiao .one {
            width: 100%;
            height: 100px;
            border: 1px solid black;
            margin-top: 30px;
            display: flex;
            justify-content: space-around;
        }

        .boxright .one .goods {
            height: 100%;
            width: 140px;
            background-color: aqua;
            text-align: center;
        }

        .boxright .one .goods img {
            width: 55%;
            height: 75%;
        }

        .boxright input {
            margin-top: 5px;
        }

        .boxright .money {
            line-height: 100px;
        }

        .boxright .amount {
            line-height: 100px;
        }

        .boxright .delete {
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <div class="boxleft">
        </div>
        <div class="boxright">
            <h4>购物车</h4>
            <div class="liebiao">
            </div>
        </div>
    </div>
    </div>
</body>

</html>
<script>
    class Gouwu {
        constructor(el, data, data1, data2, shopList) {
            this.dom = document.querySelector(el)
            this.data = data
            this.data1 = data1
            this.data2 = data2
            this.shopList=shopList
        }
        render() {
            var str = ``
            for (let i = 0; i < this.data.length; i++) {
                str += `<div class="smallbox">
                    <img src="${this.data[i]}"/>
                    <p>${this.data1[i]}</p>
                    <p>${this.data2[i]}</p>
                    <button>加入购物车</button>
                      </div>`
            }
            this.dom.querySelector('.boxleft').innerHTML = str
        }
        rendergouwuche() {
            var str1 = ``
            for (let j = 0; j < this.data.length; j++) {
            str1 += `
                 <div class="one">
                <input type="checkbox">
                <div class="goods">
                    <img src="${this.data[j]}"/>
                    <p class="name">${this.data1[j]}</p>
                </div>
                <p class="money">${this.data2[j]}</p>
                <p class="amount">1</p>
                <p class="delete">删除收藏</p>
                </div>
         `
            this.dom.querySelector('.liebiao').innerHTML = str1
            }
        }
        click() {
            var list = this.dom.querySelector('.boxleft');
            //购物车数据
            var shopList = { list:[] }
            // console.log(list);
            list.onclick = function (e) {
                if (e.target.tagName == 'BUTTON') {
                    //获取点击商品的下标
                    var btns = [...document.querySelectorAll('button')]
                    var index = btns.findIndex((item) => {
                        return item == e.target;
                    })
                    
                    //添加商品数据到购物车数组
                    shopList.list.push(list[index]);
                    g.rendergouwuche()
                    console.log(list[index]);
                }
            }
        }     
    }
    var arr = ['./image/1.png', './image/2.png', './image/3.png', './image/4.png', './image/5.png', './image/6.png', './image/7.png', './image/8.png']
    var arr1 = ['高级办公椅', '高级按摩椅', '高级电动按摩椅', '电动按摩椅', '老板椅', '办公桌', '可升降办公椅', '可升降办公桌']
    var arr2 = ['1000', '1000', '10000', '20000', '50000', '2000', '5000', '4000']
    var list = []
    var g = new Gouwu('.bigbox', arr, arr1, arr2,list)
    g.render()
    g.rendergouwuche()
    g.click()
</script>